<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .title{
            color: brown;
            background-color: #dedede;
        }
        .border{
            border: 2px solid blue;
        }
        .active{
            color: white;
            background-color: #333;
        }
    </style>
    <script>
        // 特殊属性会专门提供针对性的对象或者方法，完成快速的取值和赋值功能
        // 1. style ：提供一个DOM的专用操作属性 .style ,返回的是一个样式对象
        //            dom.style 加载当前元素的行样式对象，所有行样式都存在于该对象的内部
        //            当样式名是由多个单词组成的 连字符规则，需要在使用时转换为驼峰规则
        function getStyle(){
            let h4Dom1 = document.querySelector("#h4Dom");
            console.log(h4Dom1.style);
            console.log( h4Dom1.style.color );
            console.log( h4Dom1.style.backgroundColor );
        }
        function setStyle(){
            let h4Dom1 = document.querySelector("#h4Dom");
            h4Dom1.style.color = "blue";
            h4Dom1.style.backgroundColor = "";
            h4Dom1.style.border = "2px solid red";
        }


        // 2. class : 提供一个className属性，记录标签的class取值，返回字符串
        //            提供一个classList属性，该属性以类数组的方式，记录绑定类样式名
        //                  => classList.add(类样式名) 增加新的类样式
        //                  => classList.remove()
        //                  => classList.toggle()
        //        class 的样式修改，不是直接修改css，而是通过css优先级进行class操作
        function getClassList(){
            let h4Dom2 = document.querySelector("#h4Dom2");
            console.log(h4Dom2.className);
            console.log(h4Dom2.classList);
            
        }
        function setClassList(){
            let h4Dom2 = document.querySelector("#h4Dom2");
            // h4Dom2.className = "active"; // 覆盖原来的值
            // h4Dom2.className = h4Dom2.className + " active"; // 字符串拼接
            h4Dom2.classList.add("active"); // 类数组的填加操作
        }
        function removeClassList(){
            let h4Dom2 = document.querySelector("#h4Dom2");
            h4Dom2.classList.remove("active"); // 类数组的删除操作
        }
        function toggleClassList(){
            let h4Dom2 = document.querySelector("#h4Dom2");
            h4Dom2.classList.toggle("active")
        }

        // 3. 表单元素的相关属性
        function printUserInput(dom){
            // 表达的value属性
            //      单行文本框，下拉列表，单选按钮，多选按钮，多行文本域
            //      value 属性是用于记录用户的输入或者选择值
            console.log(dom.value);
        }

        // 布尔类型属性：属性使用只需要定义属性名，无需提供属性值
        function changeState(){
            let inputDom = document.querySelector("#input");
            // console.log( inputDom );
            console.log( inputDom.disabled );
            // !inputDom.disabled; 对disabled属性的值进行取反
            inputDom.disabled = !inputDom.disabled;
        }
    </script>
</head>
<body>
    <h4 id="h4Dom" style="color:brown;background-color: #dedede;">style样式的操作</h4>
    <input type="button" value="获取行内样式" onclick="getStyle()">
    <input type="button" value="行内样式设置" onclick="setStyle()">
    <hr>
    <h4 id="h4Dom2" class="title border">class样式操作</h4>
    <input type="button" value="获取class值" onclick="getClassList()">
    <input type="button" value="修改class值" onclick="setClassList()">
    <input type="button" value="删除class值" onclick="removeClassList()">
    <input type="button" value="互斥切换class值" onclick="toggleClassList()">
    <hr>
    <input type="text" oninput="printUserInput(this)">
    <br>
    <input type="text" onchange="printUserInput(this)">
    <br>
    <input type="radio" name="skill" value="html" onchange="printUserInput(this)">html
    <input type="radio" name="skill" value="css" onchange="printUserInput(this)">css
    <input type="radio" name="skill" value="js" onchange="printUserInput(this)">js
    <input type="radio" name="skill" value="java" onchange="printUserInput(this)">java
    <br>
    <input type="text" id="input" disabled>
    <input type="button" value="切换状态" onclick="changeState()">

    <!-- <input type="text" readonly>
    <input type="radio" checked>
    <select>
        <option value="" selected></option>
    </select> -->

</body>
</html>